<template>
  <el-form status-icon ref="formRef">
    <div class="cpro-requirement">
      <cpro-public title="任务描述" :show-stat="true">
        <template v-slot:content>
          <wageditor
            :projectDescribe="props.taskDescribe"
            @describeUpdate="describeUpdate"
          ></wageditor>
        </template>
      </cpro-public>
    </div>
  </el-form>
  <el-upload
    ref="upload"
    drag
    action="#"
    :auto-upload="false"
    multiple
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :on-change="getFile"
    :limit="1"
  >
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <template #tip>
      <div class="el-upload__tip text-red" style="margin-left: 20px">
        只能上传一个文件，后面的会覆盖前面的。
      </div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
import cproPublic from '@/components/creat-projects/cpro-public.vue'
import wageditor from '@/components/wageditor/wageditor.vue'
import type { ElForm, UploadProps, UploadFile, UploadInstance, UploadRawFile } from 'element-plus'
import { genFileId, ElMessage } from 'element-plus'
import { ref, defineEmits, defineProps } from 'vue'

const props = defineProps(['taskDescribe'])
const emit = defineEmits(['requirementUpdate'])
//附件
const addition = new FormData()
const upload = ref<UploadInstance>()

const describeUpdate = (value: any) => {
  emit('requirementUpdate', value, addition)
}
//移除文件时触发的事件
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  upload.value!.clearFiles()
}

//移除文件时触发的事件
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
//得到文件数据
const getFile = async (file: UploadFile) => {
  addition.append('filename', file.name)
  addition.append('file', file.raw)
}
//校验内容是否为空
const vailDate = (): Boolean => {
  if (props.taskDescribe == '' || addition.has("file")) {
    ElMessage({
      showClose: true,
      message: '请填写项目描述或上传附件！！',
      type: 'error'
    })
    return true
  } else {
    return false
  }
}
defineExpose({vailDate})
</script>

<style lang="less" scoped>
.cpro-requirement {
  padding: 2px 0px 0 8px;
  .item {
    margin: 0 0 4px 0;
    .pro-text {
      width: 1070px;
    }
  }
}
/deep/ .el-upload {
  --el-upload-dragger-padding-horizontal: 15px;
  padding: 0 16px;
}
/deep/ .el-upload-dragger {
  position: static;
}
// 隐藏全屏
/deep/.w-e-bar.w-e-bar-show.w-e-toolbar .w-e-bar-item:last-child {
  display: none;
}
/deep/ .el-upload-list__item {
  margin-left: 10px;
}
</style>
